@myWidth: 400px - 100px;
@myColor: white;
@mySize : 25px;
//
/*
1.变量 @变量名：变量值
2.混合  名（）
3.嵌套
&选择父级元素
4.函数
*/


.border{
  border: 10px solid black;
  border-radius: 50px;
}

.outer{
  background-color: aquamarine;
  width: @myWidth;
  color: @myColor;
  //混合
  .border();
  .inner{
     background-color: @myColor;
    //映射
    border-radius: .border[border-radius];
    &:hover{
      background-color: black;
    }
  }
}
.content{
  background-color: bisque;
  //width: @myWidth;
  width: calc(100vw - 200px);
  //~calc(100vw - 200px) => 100vw -20vw
  height: @myWidth;
  color: @myColor;
  font-size: @mySize;
  .border()
}
ol{
  @myColor:red;
  li{
    color: @myColor;
  }
}

